<!--
 * @Author: dfh
 * @Date: 2023-12-27 11:04:50
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->

<template>
  <view class="content">
    <text class="title">便捷开户</text>
    <view class="line"></view>
    <text class="sub_title">智享先机 快人一步</text>
    <view class="desc2">新加坡/香港境内外渣打银行便捷开户预约</view>
    <image :src="$filters.formatImage('welcome_image_5.png')" mode="widthFix" />
    <view class="tips-warp">
      <text class="tips-title">便捷流程 全新体验</text>
      <view class="tips-box">
        <view class="tips-row">
          <view class="tips-1">
            <view class="tips-title-wrap">
              <image :src="$filters.formatImage('icon_online.png')" class="icon" />
              <text class="tips_sub_title">线上申请</text>
            </view>
            <text class="desc">打开微信填写表单，随时随地轻松申请三步填完表单内容，开户信息一键提交</text>
          </view>
          <view class="tips-2">
            <view class="tips-title-wrap">
              <image :src="$filters.formatImage('icon_yuanchen.png')" class="icon" />
              <text class="tips_sub_title">远程预审</text>
            </view>
            <text class="desc">基本信息远程审核，缺件补件预先沟通来行时间精准预约，避免无效排队等待</text>
          </view>
        </view>
        <view class="tips-row tips-row2">
          <view class="tips-1 tips-3">
            <view class="tips-title-wrap">
              <image :src="$filters.formatImage('icon_kaihu.png')" style="width: 70rpx;height: 70rpx;margin: 16rpx;" />
              <text class="tips_sub_title">便捷开户</text>
            </view>
            <text class="desc">客户经理协助开卡，预设密码免上柜台，15分钟完成开户，一次道行搞定所有</text>
          </view>
          <view class="tips-2 tips-3">
            <view class="tips-title-wrap">
              <image :src="$filters.formatImage('icon_card.png')" class="icon" />
              <text class="tips_sub_title">定制卡片</text>
            </view>
            <text class="desc">定制卡片快递到家，足不出户从容取卡APP/电话均可激活，开启渣打新卡之流</text>
          </view>
        </view>
      </view>
    </view>
    <button class="btn" @click="navigateTo">立即申请</button>
  </view>
</template>

<script setup>

const navigateTo = () => {
  uni.redirectTo({ url: '/pages/register/index' })
}
</script>
<style>
page {
  background: linear-gradient(to right bottom, #2d3a89, #085bbb);
}
</style>
<style lang="scss" scoped>
.content {
  width: 100vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right bottom, #2d3a89, #085bbb);
  .title {
    margin-top: 120rpx;
    font-size: 60rpx;
    color: white;
    font-weight: 600;
  }

  .line {
    margin: 30rpx 0;
    width: 60%;
    height: 4rpx;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.01), white, rgba(0, 0, 0, 0.01));
    border-radius: 2rpx;
  }

  .sub_title {
    font-size: 74rpx;
    color: white;
    font-weight: 700;
  }

  .tips-warp {
    width: 90%;
    background: #0179e9;
    border-radius: 24rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;

    .tips-title {
      width: 100%;
      height: 80rpx;
      color: white;
      line-height: 80rpx;
      font-size: 40rpx;
      text-align: center;
    }

    .tips-box {
      width: 100%;
      background: white;
      display: flex;
      flex-direction: column;

      padding: 20rpx;
      box-sizing: border-box;

      .tips-row {

        display: flex;
        flex-direction: row;
        border-bottom: 2rpx solid #ddd;

        .tips-1,
        .tips-2 {
          flex: 1;
          display: flex;
          flex-direction: column;

          .tips-title-wrap {
            display: flex;
            flex-direction: row;
            align-items: center;

            .icon {
              width: 100rpx;
              height: 100rpx;
            }

            .tips_sub_title {
              font-size: 28rpx;
              color: black;
              font-weight: 600;

            }
          }


          .desc {
            font-size: 20rpx;
            color: #333;
            margin-bottom: 20rpx;
            padding-right: 20rpx;
          }
        }

        .tips-1 {
          border-right: 2rpx solid #ccc;
        }

        .tips-2 {
          padding-left: 20rpx;
        }

        .tips-3 {
          padding-top: 20rpx;

        }
      }

      .tips-row2 {
        border-bottom: 0rpx solid;
      }
    }



  }

  .btn {
    width: 86%;
    height: 100rpx;
    border-radius: 50rpx;
    margin-top: 40rpx;
    background: #0572e7;
    color: white;
    line-height: 100rpx;
    margin-bottom: 40rpx;
  }

  .desc2 {
    font-size: 30rpx;
    color: white;
    margin-top: 20rpx;
  }
}
</style>
